<template>
  <div>
    <!--选取时间开始-->
 <view class="title">相比来说比较空的 两天 </view>
    <form action="">
    <view class="week">
      <view v-for="(item, index) in weeks" :key="index" class="week-date" :class="{on:clickId===index}" @click="chooseWeek(index)">{{item.name}}</view>
    </view>
    <!--选取时间结束-->
    <!--价格设立开始-->
    <view class="title">设立价位 （单选）</view>
    <view class="price">
      <view v-for="(gold, index) in golds" :key="index" class="money" :class="{active:chooseId===index}" @click="choosePrice(index)">{{gold.name}}</view>
    </view>
    </form>
  </div>
</template>

<script>
    export default {
      data(){
        return{
          weeks: [
            {name:"周一",value:1},
            {name:"周二",value:2},
            {name:"周三",value:3},
            {name:"周四",value:4},
            {name:"周五",value:5},
            {name:"周六",value:6},
            {name:"周日",value:7},
          ],
          golds:[
            {name:"8H币/每小时",value:1},
            {name:"28H币/每小时",value:2},
            {name:"68H币/每小时",value:3},
            {name:"128H币/每小时",value:4},
            {name:"168H币/每小时",value:5},
            {name:"288H币/每小时",value:6},
            {name:"388H币/每小时",value:7},
            {name:"588H币/每小时",value:8},
          ],
          clickId: null,
          chooseId:null
        }
      },

      methods: {
        chooseWeek:function (e) {
          console.log(e)
          this.clickId = e;


        },

        choosePrice:function (e) {
          this.chooseId=e;
        },
      }
      }
</script>

<style scoped>
  /*提示*/
  .title{
    margin-left: 40rpx;
    margin-top: 40rpx;
    margin-bottom: 20rpx;
    font-size: 28rpx;
    color: #666;
  }
  /*选取时间*/
  .week{
    margin-left: 40rpx;
    width:100%;
    height:158rpx;
  }
  .week-date{
    width:120rpx;
    height:60rpx;
    border: 1px solid #979797;
    border-radius:8rpx;
    text-align: center;
    line-height: 60rpx;
    font-size: 28rpx;
    color: #666;
    float: left;
    margin-bottom: 30rpx;
    margin-right: 30rpx;
  }
  .on{
    color: #ff6d6d;
    border: 1rpx solid #ff6d6d;
  }
  /*设置价格*/
  .price{
    padding: 24rpx 0rpx 0 84rpx;
    box-sizing: border-box;
  }
  .money{
    font-size: 28rpx;
    color: #333;
    width:242rpx;
    height:80rpx;
    border-radius: 8rpx;
    border: 1rpx solid #f3f3f3;
    background: #f3f3f3;
    margin-bottom: 40rpx;
    margin-right: 84rpx;
    text-align: center;
    line-height: 80rpx;
    float: left;
  }
  .active{
    color: #fff;
    background: #ff6d6d;
    border: 1rpx solid #ff6d6d;
  }
</style>
